<template>
	<view :class="bodyClass" :style="[bodyStyle]">
		<view class="shop-sign e-p-20 e-flex bg-white" :style="[boxStyle]">
			<view class="img-box">
				<load-image mode="aspectFill" :size="['100rpx']" radius="10rpx"  :src="info.storeLogo">
					<template #error>
						<app-image :size="['100rpx']" src="store_logo.png" />
					</template>
				</load-image>
			</view>
			<view class="content e-flex-1">
				<view class="e-flex  e-m-b-20">
					<view class="e-flex-1">
						<view class="name e-flex ">
							<text class="e-font-30 fw-600 e-m-r-10">{{info.storeName}}</text>
							<view class="self-icon" v-if="APP_HAS_OWN&&info.storeHasOwn">
								{{ $t('classify.自营') }}
							</view>
						</view>
						<view class="goods c-secondary">{{ $t('classify.商品') }} {{info.storeProductCount}}</view>
					</view>
				<!-- 	<view class="btn c-primary  text-center" @tap="$goTo('/pages/store/index',  {id:info.storeId})">
						<text>{{ $t('classify.进店逛逛') }}</text>
					</view> -->
				</view>
				<view class="e-flex">
					<view class="e-flex-1 desc c-secondary">
						<text>{{ $t('classify.描述相符') }}</text>
						<text class="e-p-l-6" :class="[info.storeDescScore < 2 ? 'c-green' : info.storeDescScore > 4 ? 'c-red' : 'c-orange'  ]">{{info.storeDescScore}}</text>
					</view>
					<view class="e-flex-1 desc c-secondary">
						<text>{{ $t('classify.服务态度') }}</text>
						<text class=" e-p-l-6" :class="[info.storeServiceScore < 2 ? 'c-green' : info.storeServiceScore > 4 ? 'c-red' : 'c-orange'  ]">{{info.storeServiceScore}}</text>
					</view>
					<view class="e-flex-1 desc c-secondary">
						<text>{{ $t('classify.物流服务') }}</text>
						<text class=" e-p-l-6" :class="[info.storeDeliveryScore < 2 ? 'c-green' : info.storeDeliveryScore > 4 ? 'c-red' : 'c-orange'  ]">{{info.storeDeliveryScore}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>
<script lang="ts" setup>
	import { ref, computed } from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { useLayoutCompoments } from '@/components/list/hooks'
	import type { GoodsInfo } from '../type'
	import {APP_HAS_OWN} from '@/env'
	
	
	const props = withDefaults(defineProps<{
		info : GoodsInfo
		option : {
			//样式风格
			styleType : 0 | 1 | 2
			// 边距
			paddingTop : number
			paddingBottom : number
			paddingX : number
			// 圆角
			radiusTop : number
			radiusBottom : number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0,
	
		})
	})
	
	const ctx = useCurrentInstance()
	
	const { viewStyle: bodyStyle, bodyClass,bodyBoxStyle: boxStyle } = useLayoutCompoments(ctx, props.option)

</script>
<style lang="scss">
	@import '@/components/list/css/layoutCommon.scss';
</style>
<style lang="scss" scoped>
.shop-sign {
	.img-box {
		flex: 0 0 120rpx;
		.image {
			width: 100rpx;
			height: 100rpx;
		}
	}
	.goods {
		margin-top: 22rpx;
		font-size: 26rpx;
	}
	.btn {
		width: 144rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 36rpx;
		border: 2rpx solid var(--color-primary);
	}
	.desc {
		font-size: 24rpx;
		margin-top: 24rpx;
	}
}
.c-green {
	color: rgba(32, 166, 55, 1);
}
.c-orange {
	color: rgba(255, 186, 1, 1);
}
.c-red {
	color: $base-color-red;
}
</style>
